<template>
  <Drawer :show="show" mode="left" drawerBg="rgba(0,0,0,.8)" @change="change">
    <div class="drawer_content">
      <div class="title">Setting</div>
      <div class="user_info">
        <image class="avatar" src="/static/img/bkn.gif" alt="头像" />
        <div class="nick_name">{{ userInfo.nickName }}</div>
      </div>
      <div class="saying">
        <div class="saying_text">{{ sayingList[sayingIndex].text }}</div>
        <div class="saying_name">—— {{ sayingList[sayingIndex].name }}</div>
      </div>
    </div>
  </Drawer>
</template>
<script>
import { getRandomFn } from '@/common/utils/util.js';
import { mapGetters } from 'vuex';
import Drawer from '@/components/Drawer/index.vue';
export default {
  name: 'Setting',
  components: {
    Drawer
  },
  model: {
    prop: 'show',
    event: 'change'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      sayingList: [
        {
          text: '早晨只是坐班，坐的腚都痛了',
          name: '季羡林'
        },
        {
          text: '做了人类想成仙，生在地上要上天',
          name: '鲁迅'
        },
        {
          text: '优于别人，并不高贵，真正的高贵应该是优于过去的自己。',
          name: '海明威'
        },
        {
          text: '蠢，都是资深的。',
          name: '木心'
        },
        {
          text: '忧来无方，窗外下雨，坐沙发，吃巧克力，读狄更斯，心情又会好起来，和世界妥协。',
          name: '托尔斯泰'
        }
      ],
      sayingIndex: 0
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.sayingIndex = getRandomFn(this.sayingList.length - 1, 0);
  },
  methods: {
    change (type) {
      this.$emit('change', type);
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.sayingIndex = getRandomFn(this.sayingList.length - 1, 0);
      }
    }
  }
}
</script>
<style lang="less" scoped>
.drawer_content {
  padding: calc(38rpx + var(--status-bar-height)) 24rpx 38rpx;
  background-blend-mode: Difference;
  .title {
    text-align: right;
    padding-right: 46rpx;
    color: #fff;
    font-style: italic;
    font-weight: bold;
    font-size: 42rpx;
    text-decoration: underline;
  }
  .user_info {
    display: flex;
    align-items: center;
    margin-top: 24rpx;
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
    .nick_name {
      margin-left: 24rpx;
      color: transparent;
      paint-order: fill stroke markers;
      -webkit-text-stroke-width: 1.5px;
      -webkit-text-stroke-color: #fed128;
      text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;
      letter-spacing: 12rpx;
    }
  }
  .saying {
    margin-top: 28rpx;
    color: #fff;
    font-size: 12px;
    text-indent: 2em;
    font-style: italic;
    .saying_name {
      text-align: right;
    }
  }
}
</style>